<script setup>
// 导入pinia的数据
import { useItem } from '../../../store/index.js';
import { storeToRefs } from 'pinia';
import {reactive, ref, toRefs, markRaw, provide, computed} from 'vue'
import HostPath from './volume/HostPath.vue'
import Secret from './volume/Secret.vue'
import ConfigMap from './volume/ConfigMap.vue'
import NFS from './volume/NFS.vue'
import EmptyDir from './volume/EmptyDir.vue'
import PVC from './volume/PVC.vue'
const {item} = storeToRefs(useItem())
const data = reactive({
    volumeTypeList: [ 'hostPath', 'secret', 'configMap', 'nfs', 'emptyDir', 'persistentVolumeClaim' ],
    volumeTypeComp: {
        'hostPath': markRaw(HostPath),
        'secret': markRaw(Secret),
        'configMap': markRaw(ConfigMap),
        'nfs': markRaw(NFS),
        'emptyDir': markRaw(EmptyDir),
        'persistentVolumeClaim': markRaw(PVC)
    }
})
let volumeType = ref('hostPath')
let showAddVolume = ref(false)
const addVolume = ()=> {
    console.log("添加Volume")
    showAddVolume.value = true
}
const useItemer = useItem()
const deleteTableRow = (index) => {
  useItemer.item.spec.template.spec.volumes.splice(index, 1)
}
const closeAddVolumeDialog = () => {
  showAddVolume.value = false
}
// 发布和订阅的方式 把closeAddVolumeDialog发布出去
provide('closeAddVolumeDialog',closeAddVolumeDialog)
// 获取volume类型
const getVolumeType = computed(()=> (volumeItem)=>{
  const keyList = Object.keys(volumeItem)
  // [name, secret/nfs/]  [aws, name]
  keyList.splice(keyList.indexOf('name'), 1)
  return keyList[0]
})
const {volumeTypeList,volumeTypeComp} = toRefs(data)
</script>

<!-- //使用动态组件 -->
<template>
      <el-table 
        border
        :data="item.spec.template.spec.volumes" 
        style="width: 100%"
        height="400px"
        >
          <el-table-column align="center" prop="" label="名称" width="240px">
            <template #default="scope">
              <el-input v-model="scope.row.name"  placeholder="请输入存储卷的名称" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="类型" width="240px">
            <template #default="scope">
              <span>{{ getVolumeType(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Volume配置">
            <template #default="scope">
              <component 
              v-if="volumeTypeList.includes(getVolumeType(scope.row))"
              :is="volumeTypeComp[getVolumeType(scope.row)]"
              :key="scope.row.name"
              method="Update"
              :volumeConfig="scope.row"
              ></component>
              <span v-else>
                暂不支持对该类型的Volume进行修改
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="140px">
            <template #header>
              <el-button link type="primary" @click="addVolume()">添加</el-button>
            </template>
            <template #default="scope">
              <el-button link type="warning" @click="deleteTableRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <!-- 添加volume -->
    <el-dialog v-model="showAddVolume" title="添加Volume" center destory-on-close width="60%">
        <el-card class="box-card">
            <template #header>
            <div class="card-header">
                <el-select v-model="volumeType" placeholder="请选择volume类型">
                    <el-option
                    v-for="t in volumeTypeList"
                    :key="t"
                    :label="t"
                    :value="t"
                    >

                    </el-option>
                </el-select>
            </div>
            </template>
            <component :is="volumeTypeComp[volumeType]"></component>
        </el-card>
    </el-dialog>
</template>

<style scoped>

</style>
